<template>
  <el-form ref="form" :model="qa" :rules="rules" label-width="90px">
    <el-form-item label="问题1" prop="question1">
      <el-select
        v-model="qa.question1"
        placeholder="请选择问题1"
        style="width: 100%"
      >
        <el-option
          v-for="(val, index) in questions"
          :key="index"
          :label="val.question"
          :value="val.questionId"
          :disabled="disabledChoose(val)"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="问题1答案" prop="answer1">
      <el-input v-model="qa.answer1" placeholder="请输入你的答案"></el-input>
    </el-form-item>
    <el-form-item label="问题2" prop="question2">
      <el-select
        v-model="qa.question2"
        placeholder="请选择问题2"
        style="width: 100%"
      >
        <el-option
          v-for="(val, index) in questions"
          :key="index"
          :label="val.question"
          :value="val.questionId"
          :disabled="disabledChoose(val)"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="问题2答案" prop="answer2">
      <el-input v-model="qa.answer2" placeholder="请输入你的答案"></el-input>
    </el-form-item>
    <el-form-item label="问题3" prop="question3">
      <el-select
        v-model="qa.question3"
        placeholder="请选择问题3"
        style="width: 100%"
      >
        <el-option
          v-for="(val, index) in questions"
          :key="index"
          :label="val.question"
          :value="val.questionId"
          :disabled="disabledChoose(val)"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="问题3答案" prop="answer3">
      <el-input v-model="qa.answer3" placeholder="请输入你的答案"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="mini" @click="submit">保存</el-button>
      <el-button type="danger" size="mini" @click="close">关闭</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'ResetQa',
  data() {
    return {
      qa: {
        question1: undefined,
        answer1: undefined,
        question2: undefined,
        answer2: undefined,
        question3: undefined,
        answer3: undefined,
      },
      rules: {
        question1: [
          { required: true, message: '请选择安全问题', trigger: 'blur'}
        ],
        answer1: [
          { required: true, message: '请输入安全问题的答案', trigger: 'blur'}
        ],
        question2: [
          { required: true, message: '请选择安全问题', trigger: 'blur'}
        ],
        answer2: [
          { required: true, message: '请输入安全问题的答案', trigger: 'blur'}
        ],
        question3: [
          { required: true, message: '请选择安全问题', trigger: 'blur'}
        ],
        answer3: [
          { required: true, message: '请输入安全问题的答案', trigger: 'blur'}
        ]
      },
      questions: [],
    }
  },
  created() {
    this.getQuestions();
    this.getUserQuestions();
  },
  methods: {
    getUserQuestions() {
      this.getRequest('/answer').then(resp => {
        if (resp.data.length > 0) {
          this.qa.question1 = resp.data[0];
          this.qa.question2 = resp.data[1];
          this.qa.question3 = resp.data[2];
        }
      });
    },
    getQuestions() {
      this.getRequest('/answer/question').then((resp) => {
        if (resp) {
          this.questions = resp.data
        }
      })
    },
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.putRequest('/answer', this.qa).then(resp => {});
        }
      })
    },
    close() {
      this.$tab.closePage();
    }
  },
  computed: {
    disabledChoose(item) {
      return function (item) {
        let findItemIndex = [
          this.qa.question1,
          this.qa.question2,
          this.qa.question3,
        ].findIndex((item2) => item2 == item.questionId)

        let newArr = [
          this.qa.question1,
          this.qa.question2,
          this.qa.question3,
        ].splice(findItemIndex, 1);
        return newArr.includes(item.questionId);
      }
    },
  },
}
</script>

<style lang="scss" scoped></style>
